<template>
  <div class="integral">
    <div class="header">
      <div class="header-left">
        <el-date-picker @blur="aaa" style="position: relative;top: 50%;transform: translateY(-50%);" v-model="value1"
          type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div class="header-right">
        <div style="display: inline-block;">
          <el-input @input="search2" v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <el-button @click="search">搜索</el-button>
        <el-button>导出</el-button>
      </div>
    </div>
    <div class="content">
      <el-table stripe
        :data="tableData2 ? tableData2.slice((currentPage - 1) * pageSize, currentPage * pageSize) : [].slice((currentPage - 1) * pageSize, currentPage * pageSize)"
        border style="width: 100%">
        <el-table-column v-if="state == '充值'" align="center" show-overflow-tooltip prop="code" label="充值单号" width="180">
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="name" label="用户" width="180">
          <template #default="scope">
            <div style="float: left;">
              <el-avatar size="medium"
                src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"></el-avatar>
            </div>
            <div style="float: left;text-align: center;line-height: 40px;text-indent: 10px;">
              <span>{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" show-overflow-tooltip prop="phone" label="用户联系方式" width="180">
        </el-table-column>
        <el-table-column v-if="state == '充值'" align="center" show-overflow-tooltip prop="price" label="充值金额" width="180">
        </el-table-column>
        <el-table-column v-if="state == '余额'" align="center" show-overflow-tooltip prop="changeprices" label="余额变化"
          width="180">
          <template #default="scope">
            {{ scope.row.state ? '+' + scope.row.changeprices : '-' + scope.row.changeprices }}
          </template>
        </el-table-column>
        <el-table-column v-if="state == '积分'" align="center" show-overflow-tooltip prop="changeint" label="积分变化"
          width="180">
          <template #default="scope">
            {{ scope.row.state ? '+' + scope.row.changeint : '-' + changeint }}
          </template>
        </el-table-column>
        <el-table-column v-if="state == '余额'" align="center" show-overflow-tooltip prop="nowpri" label="当前余额"
          width="180"></el-table-column>
        <el-table-column v-if="state == '积分'" align="center" show-overflow-tooltip prop="nowint" label="当前积分"
          width="180"></el-table-column>
        <el-table-column v-if="state == '余额'" align="center" show-overflow-tooltip label="备注" width="180">
          <template #default="scope">
            {{ scope.row.state ? '充值+' + scope.row.changeprices : '支出-' + scope.row.changeprices }}
          </template>
        </el-table-column>
        <el-table-column v-if="state == '积分'" align="center" show-overflow-tooltip prop="note" label="备注"
          width="180"></el-table-column>
        <el-table-column v-if="state != '充值'" align="center" show-overflow-tooltip prop="changeuser" label="操作人"
          width="180"></el-table-column>
        <el-table-column v-if="state == '充值'" align="center" show-overflow-tooltip prop="method" label="充值方式"
          width="180"></el-table-column>
        <el-table-column v-if="state == '充值'" align="center" show-overflow-tooltip prop="method" label="状态" width="180">
          <template #default="scope">
            {{ scope.row.state ? '成功' : '未充值' }}
          </template>
        </el-table-column>
        <el-table-column align="center" :formatter='formatTime' show-overflow-tooltip prop="date" label="操作时间" width="180"></el-table-column>
      </el-table>
    </div>
    <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-size="pageSize" :total="tableData2.length ? tableData2.length : 0" />
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data() {
    return {
      value1: '',
      input: '',
      tableData2: [],
      currentPage: 1,
      pageSize: 7,
      aa: [],
      statee: false
    }
  },
  props: {
    tableData: {
      type: Array
    },
    state: {
      type: String
    }
  },
  methods: {
    aaa() {
      if (this.value1 != '') {
        this.statee = true
        this.value1 = this.value1.map(item => {
          item = Number(item)
          return item
        })
      }
    },
    handleSizeChange2(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    formatTime(row, column) {
      let date = row[column.property];
      if (date === undefined) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD")
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    search() {
      this.tableData2 = this.aa.filter(item => {
        if (this.statee) {
          if (this.input != '') {
            if (item.name.includes(this.input) && Number(new Date(item.date)) >= this.value1[0] && Number(new Date(item.date)) <= this.value1[1]) {
              return item
            }
          } else {
            if (Number(new Date(item.date)) >= this.value1[0] && Number(new Date(item.date)) <= this.value1[1]) {
              return item
            }
          }
        } else {
          if (item.name.includes(this.input)) {
            return item
          }
        }
      })
    },
    search2() {
      if (this.input == '') {
        this.tableData2 = this.aa
      }
    }
  },
  watch: {
    tableData(newnew, oldold) {
      this.aa = [...newnew]
      this.tableData2 = [...newnew]
    }
  }
}
</script>

<style scoped>
.integral {
  width: 100%;
  overflow: hidden;
}

.header {
  width: 100%;
  height: 50px;
  /* background-color: pink; */
  display: flex;
  margin-top: 20px;
}

.header-left {
  flex: 1;
}

.header-right {
  flex: 1;
  text-align: right;
}

.content {
  width: 100%;

}
</style>